<template>
  <div v-loading.fullscreen="loading">
    <el-row
      class="marginTop10"
      :gutter="10"
    >
      <el-col
        :span="24"
        style="text-align:left"
      >
        <el-input
          v-model="dialogDatas.filters.MATCODE"
          size="large"
          @change="getMatInfo()"
          clearable
        >
          <template #prepend>物料号</template>
        </el-input>

        <el-input
          v-model="dialogDatas.filters.LOCATIONID"
          size="large"
          @change="getLocationID()"
          clearable
          ref="locationIDInput"
        >
          <template #prepend>库位号</template>
        </el-input>

        <!-- <el-input
          v-model="dialogDatas.filters.IP"
          size="large"
          clearable
        >
          <template #prepend>IP</template>
        </el-input>

        <el-input
          v-model="dialogDatas.filters.PORT"
          size="large"
          clearable
        >
          <template #prepend>端口</template>
        </el-input>

        <el-input
          v-model="dialogDatas.filters.ADDRESS"
          size="large"
          clearable
        >
          <template #prepend>地址</template>
        </el-input>

        <el-input
          v-model="dialogDatas.filters.MODE"
          size="large"
          clearable
        >
          <template #prepend>亮灯模式</template>
        </el-input>

        <el-input
          v-model="dialogDatas.filters.NUMBER"
          size="large"
          clearable
        >
          <template #prepend>显示数字</template>
        </el-input> -->

      </el-col>
    </el-row>

    <el-form
      :model="dialogDatas.currentData"
      class="marginTop10"
      size="large"
    >
      <el-form-item
        v-for="item in dialogDatas.formItems"
        :label="item.label"
      >
        <el-date-picker
          v-if="item.isDate"
          v-model="dialogDatas.currentData[item.value]"
          :disabled="item.disable"
          :type="item.dateOption ? item.dateOption.type : 'date'"
          :format="item.dateOption ? item.dateOption.format : 'YYYY/MM/DD'"
          :value-format="item.dateOption ? item.dateOption.valueFormat : 'YYYY/MM/DD'"
          :date-format="item.dateOption ? item.dateOption.dateFormat : ''"
          :time-format="item.dateOption ? item.dateOption.timeFormat : ''"
        />
        <el-switch
          v-else-if="item.isSwitch"
          v-model="dialogDatas.currentData[item.value]"
          :disabled="item.disable"
          inline-prompt
          active-text="启用"
          inactive-text="不启用"
          :active-value="item.trueValue"
          :inactive-value="item.falseValue"
        />
        <el-input
          v-else
          v-model="dialogDatas.currentData[item.value]"
          :disabled="item.disable"
        />
      </el-form-item>
      <div style="margin-bottom: 20px;">

        <el-button
          type="primary"
          @click="send(1)"
        >DP亮灯</el-button>
        <el-button
          type="primary"
          @click="send(-1)"
        >DP灭灯</el-button>
        <!-- <el-button
          type="success"
          size="large"
          @click="dialogDatas.confirmBtnClick"
        >
          提交
        </el-button>
        <el-button
          type="primary"
          size="large"
          @click="dialogDatas.confirmBtnClick"
        >
          灭灯
        </el-button>
        <el-button
          size="large"
          @click="dialogDatas.currentData = {}"
        >
          清空
        </el-button> -->
      </div>
    </el-form>
  </div>
</template>
<script>
import { computed, reactive, ref } from 'vue';
import { onMounted, watch } from '@vue/runtime-core';
import { dayjs } from 'element-plus';

import myAxios from '@/myAxios/myAxios';
import myAxiosTPX from '@/myAxios/myAxiosTPX';
import { showWarning } from '@/hooks/useMyMessageBox';
import myAxios28 from '@/myAxios/myAxios28';
import { baseUrl } from '@/myAxios/api.config';
import * as mySign from '@/hooks/useSignalR.js';

export default {
  name: 'DIPLightTestView',
  setup () {
    let loading = ref(false);
    let matCodeInput = ref(null);
    let locationIDInput = ref(null);

    let send = function (mode) {
      mySign.send('sendMsg', [dialogDatas.currentData], mode != -1);

    };
    let getMatInfo = function () {

    };
    let getLocationID = function () {
      let arr = dialogDatas.filters.LOCATIONID.split(',');
      dialogDatas.currentData.LOCATIONID = dialogDatas.filters.LOCATIONID;
      dialogDatas.currentData.IP = arr[0];
      dialogDatas.currentData.PORT = arr[1];
      dialogDatas.currentData.ADDRESS = arr[2];
    };

    let dialogDatas = reactive({
      filters: {
        MATCODE: '',
        LOCATIONID: '',
        IP: '',
        PORT: '',
        ADDRESS: '',
        MODE: '',
        NUMBER: '',

      },
      dialogFormVisible: false,
      currentData: {},
      isNew: false,
      formItems: [
        {
          "value": "MATCODE",
          "label": "物料号",
          "isDate": false,
          "disable": false,
        },
        {
          "value": "LOCATIONID",
          "label": "库位号",
          "isDate": false,
          "disable": false,
        },
        {
          "value": "IP",
          "label": "IP",
          "isDate": false,
          "disable": false,
        },
        {
          "value": "PORT",
          "label": "端口",
          "isDate": false,
          "disable": false,
        },
        {
          "value": "ADDRESS",
          "label": "地址",
          "isDate": false,
          "disable": false,
        },
        {
          "value": "MODE",
          "label": "模式",
          "isDate": false,
        },
        {
          "value": "NUMBER",
          "label": "显示数量",
          "isDate": false,
          "disable": false,
        },
        // {
        //   "value": "DATA1",
        //   "label": "DATA1",
        //   "isDate": false
        // },
        // {
        //   "value": "DATA2",
        //   "label": "DATA2",
        //   "isDate": false
        // },
        // {
        //   "value": "DATA2",
        //   "label": "绑定库位号",
        //   "isDate": false,
        //   "disable": true,
        // },
        // {
        //   "value": "DATE_TIME",
        //   "label": "精确到秒的时间(示例,可删除)",
        //   "isDate": true,
        //   "dateOption": {
        //     "type": "datetime",
        //     "format": "YYYY/MM/DD HH:mm:ss",
        //     "dateFormat": "YYYY/MM/DD",
        //     "timeFormat": "HH:mm:ss",
        //     "valueFormat": "YYYY/MM/DD HH:mm:ss"
        //   }
        // },
      ],
    });


    return {
      send,

      getMatInfo,
      getLocationID,
      loading,
      dialogDatas,
    };
  }
}
</script>
<style lang="css" scope>
.marginTop10 {
  margin-top: 10px;
}
</style>

